<template>
	<div class="theme">
		<van-nav-bar left-text="返回" left-arrow @click-left="onClickLeft" />
		<div class="overlay headTop">
			<div class="overlay-content scrolling">
				<div align="center">
					<van-image width="40%" height="40%" :src="img" />
				</div>
				<div align="center" style="background-color: white;border-radius: 10px;margin: 40px 20px 10px;">
					<div style="padding: 20px 0px;font-size: 15px;color: #43add5;">
						你的邀请码
					</div>
					<div style="padding: 15px 0px;font-size: 38px;color: #43add5;padding-top: 0px;font-weight: 600;letter-spacing: 1px;" v-text="shar.uuid ? shar.uuid : '正在获取邀请码'">
						ABCDEFG
					</div>
					<div class="sure">
						<van-button color="#43add5" style="width: 25%;" class="copy" :data-clipboard-text="shar.uuid" @click="copy">复制</van-button>
					</div>
					<div style="color: #43add5;font-size: 14px;padding: 15px 0px;" v-text="'已分享 ' + team + ' 人'">
						已分享 10 人
					</div>
					<van-sticky>
						<van-button type="primary" disabled>当日算力值: {{calculation ? parseFloat(calculation).toFixed(5).slice(0,-1) : '0.0000'}} USDT</van-button>
					</van-sticky>
					<div class="circle" style="position: absolute;margin-left: -15px;margin-top: 10px;"></div>
					<van-divider style="padding: 10px 0px;padding-bottom: 0px;width: 90%;" />
					<div class="circle" style="position: absolute;right: 0;margin-right: 5px;margin-top: -32px;"></div>
					<div>
						<van-image width="40%" height="40%" :src="shar.imgUrl ? shar.imgUrl : img2" />
					</div>
					<div style="color: #7D7E80;padding-bottom: 30px;">扫码下载火烈鸟</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	let _this;
	import { base } from './../utils/api';
	export default {
		name: 'Share',
		components: {},
		props: {},
		data() {
			return {
				img: require('./../assets/images/gg.png'),
				img2: require('./../assets/images/ewm.png'),
				shar: [],
				team: [],
				calculation: []
			};
		},
		beforeCreate() {
			_this = this;
		},
		watch: {},
		computed: {},
		methods: {
			onClickLeft() {
				this.$router.push({
					path: '/Mine'
				});
			},
			copy() {
				let clipboard = new ClipboardJS('.copy')
				clipboard.on('success', e => { 
					this.$toast('复制成功');
					clipboard.destroy();
				})
				clipboard.on('error', e => { 
					this.$toast('复制失败');
					clipboard.destroy();
				})
			},
			getSharing() {
				base.getSharing().then(res => {
					this.shar = res.data;
				})
			},
			getMyteam() { // 获取团队的人数
				base.getMyteam().then(res => {
					this.team = res.data.total;
				})
			},
			getCalculation() {
				base.getCalculation().then(res => {
					this.calculation = res.data;
				})
			}
		},
		created() {},
		mounted() {
			this.getSharing();
			this.getMyteam();
			this.getCalculation();
		},
		destroyed() {

		},
		filters: {}
	};
</script>

<style lang="less" scoped>
	/deep/ .van-nav-bar {
		background-color: #43add5;
	}
	
	/deep/ .van-nav-bar .van-icon {
		color: white;
	}
	
	/deep/ .van-nav-bar__title {
		color: white;
	}
	
	/deep/ .van-nav-bar__arrow {
		font-size: 18px;
	}
	
	/deep/ .van-nav-bar__text {
		color: white;
	}
	
	.overlay {
		background-color: #43add5;
	}
	
	[class*=van-hairline]::after {
		border: 0;
	}
	
	.sure /deep/ .van-button {
		height: 30px;
		line-height: 28px;
		border-radius: 5px;
	}
	
	/deep/ .van-button--normal {
		font-size: 12px;
	}
	
	/deep/ .van-sticky .van-button {
		height: 26px;
		line-height: 24px;
		border-radius: 2px;
	}
	
	/deep/ .van-sticky .van-button--primary {
		color: #b66721;
		background-color: #fcf1d0;
		border: 1px solid #fcf1d0;
	}
	
	.circle {
		width: 30px;
		height: 30px;
		background: #43add5;
		-moz-border-radius: 50px;
		-webkit-border-radius: 50px;
		border-radius: 50px;
	}
	
	/deep/ .van-button--disabled {
		opacity: .8;
	}
</style>